<template>
	<view style="position: relative;">
		<u-navbar title='我的' left-icon=" " :titleStyle="{color:'white'}" bgColor="transparent"
			:placeholder="true"></u-navbar>
		<image src="http://qiniuapplet.jiachuangnet.com/personBg.png"
			style="width:750rpx;height: 410rpx;position: absolute;top:0;left:0"></image>
		<view style="width:700rpx;min-height:160rpx;position: absolute;top:180rpx;left:25rpx;">
			<view class="userInfo">
				<view v-if='isLogin' class="flex user_msg_box">
					<view class="flex user_msg">
						<image src="http://qiniuapplet.jiachuangnet.com/avatar1.png"
							style="width: 120rpx;height:120rpx"></image>
						<view style="margin-left:10rpx;color:white">
							<view style="font-size:32rpx;font-weight: 700">{{userData.userName}}</view>
							<view style="font-size: 28rpx;margin-top: 14rpx;">{{userData.mobile}}</view>
						</view>
					</view>
					<view class="icon-box" v-if="authority.includes(995)">
						<navigator url="/pages/visual/index">
							<u-icon name="list-dot" color="#fff" size="28"></u-icon>
						</navigator>
					</view>
				</view>
				<view v-else class="flex" style="align-items: center;" @click="toPath('login/index')">
					<image src="http://qiniuapplet.jiachuangnet.com/avatar.png" style="width: 120rpx;height:120rpx">
					</image>
					<view style="margin-left: 10rpx;color:white;font-size: 32rpx;font-weight:700">您好，请登录！</view>
				</view>
			</view>
			<view class="list">
				<view @click="toPath('dataContact/index')" class="flex listItem" v-if="authority.includes(995)">
					<view class="flex line">
						<image src="http://qiniuapplet.jiachuangnet.com/dataContact/data.png"
							style="width: 58rpx;height: 58rpx;"></image>
						<text style="margin-left: 10rpx;">数据汇总</text>
					</view>
					<u-icon name="arrow-right" color='#9C9C9C' size="17rpx"></u-icon>
				</view>
				<view @click="toPath('inventory/warning')" class="flex listItem">
					<view class="flex line">
						<image src="http://qiniuapplet.jiachuangnet.com/person/jinggao.png"
							style="width: 58rpx;height: 58rpx;"></image>
						<text style="margin-left: 10rpx;">预警库存</text>
					</view>
					<u-icon name="arrow-right" color='#9C9C9C' size="17rpx"></u-icon>
				</view>
				<view @click="toPath('reimbursement/reject')" class="flex listItem">
					<view class="flex line">
						<image src="http://qiniuapplet.jiachuangnet.com/person/bohui.png"
							style="width: 58rpx;height: 58rpx;"></image>
						<text style="margin-left: 10rpx;">驳回报销</text>
					</view>
					<u-icon name="arrow-right" color='#9C9C9C' size="17rpx"></u-icon>
				</view>
				<view @click="toPath('uploadPinc/index')" class="flex listItem">
					<view class="flex line">
						<image src="http://qiniuapplet.jiachuangnet.com/person/bohui.png"
							style="width: 58rpx;height: 58rpx;"></image>
						<text style="margin-left: 10rpx;">上传图片</text>
					</view>
					<u-icon name="arrow-right" color='#9C9C9C' size="17rpx"></u-icon>
				</view>
				<view @click="toPath('updatePwd/index')" class="flex listItem">
					<view class="flex line">
						<image src="http://qiniuapplet.jiachuangnet.com/person/xiugaimima.png"
							style="width: 58rpx;height: 58rpx;"></image>
						<text style="margin-left: 10rpx;">修改密码</text>
					</view>
					<u-icon name="arrow-right" color='#9C9C9C' size="17rpx"></u-icon>
				</view>
				<view @click="logOut" class="flex listItem">
					<view class="flex line">
						<image src="http://qiniuapplet.jiachuangnet.com/person/tuichu.png"
							style="width: 58rpx;height: 58rpx;"></image>
						<text style="margin-left: 10rpx;">退出登陆</text>
					</view>
					<u-icon name="arrow-right" color='#9C9C9C' size="17rpx"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let app = getApp();
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				isLogin: false,
				userData: null,
				authority: []
			}
		},
		onShow() {
			this.userInfo();
			this.authority = uni.getStorageSync('authority') || []
		},
		methods: {
			logOut() {
				uni.$u.http.post('/user/logout', ).then(res => {
					uni.removeStorage({
						key: 'token'
					})
					uni.removeStorage({
						key: 'authority'
					})
					uni.navigateTo({
						url: '/pages/login/index'
					})
				})
			},
			toPath(url) {
				console.log(url);
				uni.navigateTo({
					url: "/pages/" + url
				})
			},
			userInfo() {
				uni.$u.http.get('/user/userInfo').then(res => {
					if (res) {
						this.isLogin = true;
						this.userData = res;
					} else {
						this.isLogin = false;
					}
				}).catch(err => {

				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	.user_msg_box {
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	}

	.flex {
		display: flex;
	}

	.list {
		width: calc(100%);
		background-color: white;
		border-radius: 16rpx;
		margin-top: 57rpx;
	}

	.line {
		align-items: center;
	}

	.listItem {
		width: calc(100% - 40rpx);
		padding: 30rpx 20rpx;
	}

	.listItem {
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #E5E5E5;
		font-size: 30rpx;
		color: #2d2d2d;
	}

	.listItem:nth-last-child(1) {
		border: none;
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>